<template>
    <div class="mine-container">
        <myNavbar title="申请商家"></myNavbar>
        <div class="mine-container-item">
            <div class="container-wrap banner-wrap">
                <div class="banner" style="height:360px">
                  <image class="banner-image" style="height: 360px"
                         src="http://cdnx.365.rzico.com/10200/upload/20211222/9c4e021b-b5cb-489c-a109-3b2b851b8dd3.jpg"></image>
                </div>
            </div>
        </div>
        <list>
            <cell>
                <div class="mine-container-item">
                    <div class="addressEdit-list">
                        <div v-if="queryShopStatus==0" class="addressEdit-list-item bb">
                            <text class="addressEdit-label">登录手机
                            </text>
                            <input class="addressEdit-list-item-input" placeholder="请填写手机号码" :value="applyFrom.username"
                                   v-model="applyFrom.username"/>
                        </div>
                        <div v-if="queryShopStatus==0" class="conter-up bb">
                            <div style="display: flex;flex-direction: row;align-items: center">
                                <text class="conter-up-text">验证码</text>
                            </div>
                            <input placeholder="填写验证码" style="margin-left: 55px;height: 107px;width: 300px"
                                   v-model="applyFrom.verifyCode">
                            <div>
                                <button class="button01" :disabled="disabled" :text="btntxt" @click="sendcode"
                                        style="width:200px;height:60px;	 background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));margin-top: 25px;margin-right:25px;border-radius: 10px; "></button>
                            </div>
                        </div>
                        <div v-if="queryShopStatus==0" class="addressEdit-list-item bb">
                            <text class="addressEdit-label">登录密码</text>
                            <input class="addressEdit-list-item-input" placeholder="请登录密码" :value="applyFrom.password"
                                   v-model="applyFrom.password"/>
                        </div>
                      <div class="addressEdit-list-item bb">
                            <text class="addressEdit-label">门店名称</text>
                            <input class="addressEdit-list-item-input" placeholder="请填写门店名称"
                                   :value="applyFrom.storeName" v-model="applyFrom.storeName"/>
                        </div>
                        <div class="addressEdit-list-item bb">
                            <text class="addressEdit-label">简单介绍</text>
                            <input class="addressEdit-list-item-input" placeholder="简单介绍下商户" :value="applyFrom.remark"
                                   v-model="applyFrom.remark"/>
                        </div>

                      <div class="addressEdit-list-item bb">
                        <text class="addressEdit-label">店长名称</text>
                        <input class="addressEdit-list-item-input" placeholder="请填写店长名称"
                               :value="applyFrom.linkman" v-model="applyFrom.linkman"/>
                      </div>

                        <div class="addressEdit-list-item bb">
                            <text class="addressEdit-label">联系电话</text>
                            <input class="addressEdit-list-item-input" placeholder="请填写客服电话" :value="applyFrom.phone"
                                   v-model="applyFrom.phone"/>
                        </div>
                      <div class="addressEdit-list-item bb detail" @click="toSelectArea">
                        <text class="addressEdit-label">详细地址</text>
                        <text :class="[applyFrom.building==''?'addressEdit-detail':'addressEdit-detailActive']" :value="applyFrom.building"
                              v-model="applyFrom.building">{{applyFrom.building==""?'小区/写字楼等':applyFrom.building}}</text>
                        <text class="title2">&#xe61f;</text>
                      </div>
                      <div class="addressEdit-list-item bb detail">
                            <text class="addressEdit-label"></text>
                            <textarea class="addressEdit-textarea" placeholder="楼号/单元/门牌号" :value="applyFrom.roomNumber"
                                      v-model="applyFrom.roomNumber"></textarea>
                        </div>


                      <div class="addressEdit-list-item bb" >
                        <text class="addressEdit-label">让利比例</text>
                        <input class="addressEdit-list-item-input" placeholder="请输入让利比例" @input="Formatscale" @blur="handleBlur"  type="number"
                               :value="applyFrom.profitTransfer" v-model="applyFrom.profitTransfer"/>
                        <text class="addressEdit-label">%</text>
                      </div>


                        <div class="mine-list-item-head" @click="pick('thedoor')">
                            <text class="mine-list-item-title">店铺门头照</text>
                            <div class="login-flex">
                                <image v-if="attach.thedoor" :src="attach.thedoor"
                                       class="mine-list-item-headImage"></image>
                                <text class="mine-list-item-head-placeholder" v-else>点击上传门头照</text>
                                <text class="mine-list-item-head-icon">&#xe61f;</text>
                            </div>
                        </div>
                        <div class="mine-list-item-head" @click="pick('scene')">
                            <text class="mine-list-item-title">店内场景照</text>
                            <div class="login-flex">
                                <image v-if="attach.scene" :src="attach.scene" class="mine-list-item-headImage"></image>
                                <text class="mine-list-item-head-placeholder" v-else>点击上传店内场景照</text>
                                <text class="mine-list-item-head-icon">&#xe61f;</text>
                            </div>
                        </div>
                        <div class="mine-list-item-head" @click="pick('license')">
                            <text class="mine-list-item-title">营业执照</text>
                            <div class="login-flex">

                                <image v-if="attach.license != null" :src="attach.license"
                                       class="mine-list-item-headImage"></image>
                                <div class="attach-license">
                                  <text v-if="attach.license == ''" class="mine-list-item-head-placeholder">点击上传营业执照</text>
                                </div>
                                <text class="mine-list-item-head-icon">&#xe61f;</text>
                            </div>
                        </div>

                    </div>
                    <div class="imgaree">
                        <div style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
                            <div :class="[agreeisshow==false?'bottom_content_image':'bottom_content_image_agree']"
                                 @click="agreeshow">
                                <image v-if="agreeisshow==true"
                                       src="http://rzico.oss-cn-shenzhen.aliyuncs.com/agree.png" alt=""
                                       style="width:35px;height: 35px"></image>
                            </div>
                        </div>
                        <div class="bottom_content_text">
                            <text class="bottom_text" @click="agreeshow">我已经阅读并了解</text>
                            <text class="bottom_text_right" @click="privacyClick">【便民服务站协议】</text>
                        </div>
                    </div>
                    <div class="btn addressEdit-list-submit botton_Bg_Color" @click="submit">
                      <text v-if="queryShopStatus == 0" class="addressEdit-list-submit-btn">申请成为京东便民服务站</text>
                      <text v-if="queryShopStatus == 1" class="addressEdit-list-submit-btn">修改京东便民服务站</text>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
    import md5 from 'js-md5';
    import {register,update as updateApply} from '../../../api/mch';
    import myNavbar from "../../../components/myNavbar/myNavbar";
    import {policy} from "../../../api/oss";
    import {sendMsg} from "../../../api/user";
    import {queryShopStatus} from "@/api/order";
    const eeui = app.requireModule('eeui');
    const picker = weex.requireModule('picker')
    const picture = app.requireModule("eeui/picture");
    const network = app.requireModule("eeui/network");
    const geolocation = app.requireModule("eeui/geolocation");
    export default {
        components: {
            myNavbar
        },
        data() {
            return {
                lng: 0,
                lat: 0,
                time: 0,
                btntxt: "获取验证码",
                disabled: false,
                submitOff: true,
                attach: {
                    scene: '',
                    thedoor: '',
                    license: '',
                },
                haveAvatar: '',
                agreeisshow: false,
                applyFrom: {
                    username: "",
                    password: '',
                    storeName: '',
                    // city:'',
                    building: "",
                    roomNumber: '',
                    phone: '',
                    remark: '',
                    verifyCode: '',
                    linkman:'',
                    profitTransfer:'',
                },
                photoType: '',
                uuid: '',
                images: [],
                dataObj: {
                    policy: '',
                    signature: '',
                    key: '',
                    ossaccessKeyId: '',
                    dir: '',
                    host: ''
                },
                id: "",
                level: 0,
                queryShopStatus:0,
                mchId:''
            }
        },
        created() { // 在实例创建完成后被立即调用
            let _this = this
            this.initIconFont()
            let params = app.config.params
            this.beforeUpload()
            this.getQueryShopStatus()

        },

        methods: {
            handleBlur(){
              if(this.applyFrom.profitTransfer>50){
                this.applyFrom.profitTransfer =50
              }
              if(this.applyFrom.profitTransfer<0){
                this.applyFrom.profitTransfer =0
              }
            },
            Formatscale(){
              if(this.applyFrom.profitTransfer>50){
                this.applyFrom.profitTransfer =50
              }
              if(this.applyFrom.profitTransfer<0){
                this.applyFrom.profitTransfer =0
              }
            },
            sendcode() {
                var _this = this
                if (this.applyFrom.username == '') {
                    eeui.toast({
                        message: '登录手机不能为空'
                    })
                    return false;
                }
                if (this.time == 0) {
                    _this.getSendMsg()
                }
                this.time = 30;
                this.timer();
            },
            getSendMsg() {
                sendMsg({
                    tplKey: 'register',
                    username: this.applyFrom.username //从上一个页面手机号传值（mobile）
                }).then(res => {
                  console.log("11111111111111111111")
                  console.log(res)
                    if (res.type == "success") {
                        eeui.toast({
                            message: '验证码已发送'
                        })
                    } else {
                        eeui.toast({
                            message: '验证码发送失败，请稍后重试！'
                        })
                    }
                })
            },
            //发送手机验证码倒计时
            timer() {
                if (this.time > 0) {
                    this.disabled = true;
                    this.time--;
                    this.btntxt = this.time + "秒";
                    console.warn(this.btntxt)
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    // this.btntxt = '重新发送(' + time + ')';
                    this.btntxt = '重新发送'
                    this.disabled = false;
                }
            },
            //隐私政策的点击事件
            privacyClick(){
                let params = {
                    mchId: this.getGlobalData().mchId,
                    tagIds: this.privacyId,
                    title: '隐私政策'
                };
                eeui.openPage({
                    url: 'root://pages/member/detail/detail.js',
                    params,
                    statusBarType: "immersion",
                    statusBarStyle: false
                }, result => {
                    console.log('跳转到详情页成功');
                });
            },
            agreeshow(){
                this.agreeisshow = !this.agreeisshow
            },
            checkAuthorize(){
                this.user.avatar = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=183246121,2109342373&fm=26&gp=0.jpg';
                this.haveAvatar = true
            },
            pick (photoType) {
                this.photoType = photoType
                console.log(this.photoType)

                picker.pick({
                    items: ['本地上传', '拍照上传']
                }, event => {
                    if (event.result === 'success') {
                        this.value = event.data
                        this.fileClick()
                    }
                })
            },
            fileClick() {
                var _this = this
                _this.uuid = this.getUUID()
                if (this.value == 0) {
                    picture.create({
                        type: 'gallery',
                        gallery: 1,
                        mode: 1
                    }, function (result) {
                        if (result.status == 'success') {
                            console.log(result)
                            var tempFilePath = result.lists[0].path
                            _this.uploadImg(tempFilePath)
                        }
                    });
                } else if (this.value == 1) {
                    picture.create({
                        type: 'camera',
                        gallery: 1,
                        mode: 1
                    }, function (result) {
                        if (result.status == 'success') {
                            console.log(result)
                            var tempFilePath = result.lists[0].path
                            _this.uploadImg(tempFilePath)
                        }
                    });
                }
            },
            beforeUpload() {
                let _self = this;
                policy({mchId: this.getGlobalData().mchId}).then(response => {
                    console.log(this.getGlobalData().mchId)
                    _self.dataObj.policy = response.data.policy;
                    _self.dataObj.signature = response.data.signature;
                    _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
                    _self.dataObj.dir = response.data.dir;
                    _self.dataObj.key = response.data.dir + '/' + _self.uuid + "${filename}";
                    _self.dataObj.host = response.data.action;
                    _self.host = response.data.host
                }).catch(err => {
                    console.log(err)
                })
            },
            // 上传图片
            uploadImg(filePath) {
              eeui.loading();
              let _this = this;
                var typePath = filePath;
                _this.typePath = typePath.split('.')
                _this.dataObj.key = _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1];
                network.upload({
                    url: _this.dataObj.host,
                    path: filePath,
                    name: 'file',
                    formData: _this.dataObj,
                }, (ret) => {
                    console.log(ret)
                    if (ret.status == 200 || ret.status == 204) {
                      eeui.loadingClose();
                      if (this.photoType == 'thedoor') {
                            _this.attach.thedoor = _this.dataObj.host + '/' + _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1]
                            // _this.submitDoorPhoto()
                        }
                        if (this.photoType == 'license') {
                            _this.attach.license = _this.dataObj.host + '/' + _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1]
                             // _this.submitDoorPhoto()
                        }
                        if (this.photoType == 'scene') {
                            _this.attach.scene = _this.dataObj.host + '/' + _this.dataObj.dir + '/' + _this.uuid + '.' + _this.typePath[_this.typePath.length - 1]
                            // _this.submitDoorPhoto()
                        }
                    }
                    if (ret.status != 100) {
                        eeui.loadingClose();
                    }
                })
            },
          // submitDoorPhoto() {
          //   var _this = this
          //   _this.loading = true;
          //   update({license:_this.attach.license}).then(response => {
          //     console.log(response)
          //     _this.attach.license = this.thumbnail(res.data.license,180,180)
          //     _this.$message({
          //       message: response.content,
          //       offset: 120,
          //       center: true
          //     });
          //   }).catch(error => {
          //
          //   });
          // },
          //跳转到区域选择页面
          toSelectArea() {
            eeui.openPage({
              pageName: "selectArea",
              url: "root://pages/member/addressEdit/selectArea.js",
              statusBarType: 'immersion',
              statusBarStyle: false
            }, (res) => {
              if (res.status == "destroy" && res.pageName == "selectArea") {
                let variable = eeui.getCaches('address')
                console.log('variable--' + JSON.stringify(variable))
                if (!this.isNull(variable)) {
                  console.log('variable.location--' + variable.location)
                  this.lat = variable.location.split(",")[1]
                  console.log('latitude--' + this.latitude)
                  this.lng = variable.location.split(",")[0]
                  console.log('longitude--' + this.longitude)
                  this.applyFrom.building = variable.adName + variable.address + "(" + variable.name + ")"
                  console.log('building--' + this.applyFrom.building)

                }

              }
            });
          },
            //表单提交事件
            submit() {
              if(this.queryShopStatus == 0){
                if (this.isNull(this.applyFrom.username)) {
                  eeui.toast({
                    message: '管理账号不能为空'
                  })
                } else if (this.isNull(this.applyFrom.password)) {
                  eeui.toast({
                    message: "管理密码不能为空"
                  });
                } else if (this.isNull(this.applyFrom.storeName)) {
                  eeui.toast({
                    message: "门店名称不能为空"
                  });
                } else if (this.isNull(this.applyFrom.building)) {
                  eeui.toast({
                    message: "详细地址不能为空"
                  });
                } else if (this.isNull(this.applyFrom.roomNumber)) {
                  eeui.toast({
                    message: "楼号/单元/门牌号信息不能为空"
                  });

                } else if (this.agreeisshow == false) {
                  eeui.toast('请阅读协议')
                  return;
                } else {
                  console.info("this.submitOff" + this.submitOff)
                  if (this.submitOff) {
                    // this.submitOff = false
                    let params = {}
                    params.address = this.applyFrom.building + this.applyFrom.roomNumber
                    params.lat = this.lat
                    params.lng = this.lng
                    params.mchName = this.applyFrom.storeName;
                    params.password = md5(this.applyFrom.password)
                    // params.password = this.applyFrom.password
                    params.phone = this.applyFrom.phone
                    params.username = this.applyFrom.username
                    params.verifyCode = this.applyFrom.verifyCode
                    params.roomNumber = this.applyFrom.roomNumber
                    params.remark = this.applyFrom.remark
                    params.linkman = this.applyFrom.linkman
                    var _this = this
                    _this.loading = true;

                    this.attach.profitTransfer = this.applyFrom.profitTransfer

                    console.info("1111111111111111111111111111111111111")
                    console.info(this.attach)
                    console.info(params)
                    console.info("1111111111111111111111111111111111111")
                    register(this.attach, params).then(res => {
                          if (res.type == 'success') {
                            eeui.toast('申请成功')
                            eeui.closePage()
                            this.submitOff = true
                          }
                        }
                    ).catch(error => {
                      this.submitOff = true
                    })

                  }
                }
              }else if (this.queryShopStatus == 1){
                if (this.agreeisshow == false) {
                  eeui.toast('请阅读协议')
                  return;
                }
                this.submitUpdateApply()
              }
            },
          submitUpdateApply(){
            let params = {}
            params.mchId = this.mchId
            params.address = this.applyFrom.building + this.applyFrom.roomNumber
            params.lat=this.lat
            params.lat=this.lng
            params.phone = this.applyFrom.phone
            params.remark =this.applyFrom.remark
            params.mchName =  this.applyFrom.storeName
            params.linkman = this.applyFrom.linkman
            updateApply(this.attach,params).then(res=>{
              if (res.type == 'success') {
                eeui.toast('修改成功')
                eeui.closePage()
              }
            })
          },
          getQueryShopStatus() {
            queryShopStatus().then(res => {
                if( res.data.data.address != null){
                  this.queryShopStatus = 1
                }
                if(res.data.data.address != null){
                  this.applyFrom.building  = res.data.data.address.substring(0, res.data.data.address.indexOf(")")+1 );
                  this.applyFrom.roomNumber  = res.data.data.address.substring(res.data.data.address.indexOf(")")+1 );
                }
                this.lat = res.data.data.lat
                this.lng = res.data.data.lng
                this.applyFrom.storeName = res.data.data.name
                this.applyFrom.phone = res.data.data.phone
                this.applyFrom.remark = res.data.data.remark
                this.attach =  JSON.parse(res.data.data.attach);
                this.mchId = res.data.data.id
                this.applyFrom.linkman = res.data.data.linkman



            })
          },
        },
    }
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
    .conter-up-text {
        font-size: 32px;
        font-weight: 400;
        color: #333333;
        /*height: 102px;*/
        /*padding: 40px 0 43px 20px;*/
    }

    .Underline {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #eaeaea;
    }

    .conter-up {
        justify-content: space-between;
        flex-direction: row;
    }

    .addressEdit-detail,
    .addressEdit-detailActive {
        font-size: 30px;
        flex: 1;
        lines: 2;
        text-overflow: ellipsis;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(135, 135, 135, 0.822);
        color: #000;

    }

    .bottom_content_image {
        width: 35px;
        height: 35px;
        border-width: 1px;
        border-style: solid;
        border-color: #999999;
        margin-right: 10px;

        /*margin-top: 10px;*/
    }

    .bottom_content_image_agree {
        width: 35px;
        height: 35px;
        /* border-width: 1px;
        border-style: solid;
        border-color: #ffffff; */
        margin-right: 10px;
        /*margin-top: 10px;*/
        /* margin-bottom: 5px; */
    }

    .mine-container {
        flex: 1;
        background-color: rgba(248, 248, 248, 0.8);
    }

    .title2 {
        color: gray;
        font-size: 36px;
        font-family: iconfont2;
        color: #cccccc;
    }

    .addressEdit-list {
        margin: 20px 20px 0;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        padding: 0 20px;
    }

    .addressEdit-list-item {
        align-items: center;
        height: 102px;
        font-size: 28px;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        display: flex;
       flex-direction: row;
        align-items: center;
        position: relative;
    }

    .addressEdit-list-item-input {
        width: 470px;
        height: 50px;
    }

    .bb {
        border-bottom-style: solid;
        border-bottom-width: 4px;
        border-bottom-color: rgba(128, 128, 128, 0.062);
    }

    .addressEdit-label {
        width: 152px;
        font-size: 30px;
        box-sizing: border-box;
    }

    .detail {
        height: 120px;
        align-items: center;
    }

    .addressEdit-textarea,
    .addressEdit-textareaActive {
        font-size: 30px;
        flex: 1;
        line-height: 40px;
        lines: 2;
        text-overflow: ellipsis;
        font-family: PingFang SC;
        font-weight: 400;
        max-height: 80px;
    }

    .addressEdit-list-submit-btn {
        font-size: 32px;
        letter-spacing: 5px;
        color: white;
        font-weight: 400;
    }

    .addressEdit-list-submit {
        align-items: center;
        justify-content: center;
        margin: 20px 20px 0;
        width: 710px;
        display: block;
        height: 82px;
        border-radius: 100px;
    }

    .mine-list-item-head {
        /*height: 126px;*/
        height: 102px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;

        border-bottom-style: solid;
        border-bottom-width: 4px;
        border-bottom-color: rgba(128, 128, 128, 0.062);
    }

    .mine-list-item-title {
        color: rgba(26, 26, 30, 1);
        font-size: 30px;
    }

    .mine-list-item-headImage {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        overflow: hidden;
        display: block;
        border-style: solid;
        border-width: 2px;
        border-color: #fff;
    }

    .mine-list-item-head-icon {
        font-size: 30px;
        opacity: 0.5;
        font-family: iconfont2;
    }

    .login-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .bottom_content_text {
        width: 550px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .bottom_text {
        /*margin-top: 13px;*/
        margin-left: 20px;
        font-size: 30px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .bottom_text_right {
        color: #EE6D4D;
        font-size: 30px;
        font-weight: 400;
    }

    .phone_input {
        width: 564px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
        opacity: 0.4;
    }

    .verification_input {
        width: 480px;
        height: 106px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
        opacity: 0.4;
    }

    .verification_button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        height: 56px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(212, 215, 220, 1);
    }

    .verification_button_title {
        border-radius: 4px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .picker {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .tittle_accounttwo {
        /* height: 41px; */
        margin-top: 40px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(231, 91, 83, 1);
    }

    .login_content_app {
        /* background-color: aquamarine; */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .tittle_account_title_login {
        font-size: 38px;
        font-weight: 400;
        color: rgba(231, 91, 83, 1);
        /* line-height: 48px; */
    }

    .imgaree {
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
    }
    .mine-list-item-head-placeholder {
      color: #b4b4b4;
    }
    .attach-license{
      display: flex;
      flex-direction: row;
      align-items: center
    }


</style>
